<template>
  <div>
    <!-- <router-view></router-view> -->
    <div class="title">
      <van-nav-bar title="账号注册" left-arrow @click-left="$router.back()" />
    </div>
    <!-- 输入框部分 -->
    <div class="input">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="username"
          placeholder="请输入您的账号"
          :rules="[{ required: true, message: '请填写账号' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          placeholder="请输入您的密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >注 册</van-button
          >
          <div class="end">
            <p @click="$router.push('/login')">已有账号，我要登录~</p>
          </div>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { register } from '@/api/user'
export default {
  name: 'login-page',
  data() {
    return {
      username: '',
      password: '',
      rules: []
    }
  },
  methods: {
    async onSubmit(values) {
      // console.log('submit', values)
      const res = await register(values)
      this.$toast.success('注册成功')
      this.$router.push('/login')
      console.log(res)
      // window.localstorage.setItem('mytoken', res.data.token)
    }
  }
}
</script>

<style scoped lang="less">
.title {
  .van-nav-bar {
    background-color: #1904f7;
  }
}
.van-button {
  background-color: #1904f7;
}
.end {
  margin: 30px auto;
  width: 340px;
  height: 100px;
  // background-color: #21b97a;
  text-align: center;
  p {
    font-size: 14px;
    color: #6d6d6d;
  }
}
</style>
